import './china.js';
export default function ({
  data = [
    {
      name: '黑龙江',
      value: '北京市',
      lnglat: [127.9688, 45.368],
    },
    {
      name: '内蒙古',
      lnglat: [110.3467, 41.4899],
      value: 50,
    },
    {
      name: '吉林',
      lnglat: [125.8154, 44.2584],
      value: 80,
    },
    {
      name: '河北',
      lnglat: [114.4995, 38.1006],
      value: 135,
    },
  ],
} = {}) {
  let effectScatter = data.map(v => {
    const { name, lnglat, value } = v;
    return {
      name: name,
      value: [...lnglat, value],
    };
  });
  return {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params) {
        const { marker, name, value } = params;
        return `<div style="color: #fff;">${marker}${name}: ${value[2]}</div>`;
      },
    },
    backgroundColor: 'transparent',
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false,
        },
      },
      roam: true, //是否允许缩放
      itemStyle: {
        color: 'rgba(4, 84, 109, .5)', //地图背景色
        borderColor: '#30c7e4', //省市边界线00fcff 516a89
        borderWidth: 1,
        emphasis: {
          color: 'rgba(37, 43, 61, .5)', //悬浮背景
        },
      },
    },
    series: [
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        showEffectOn: 'emphasis',
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'fill', //波纹绘制方式 stroke, fill
          scale: 4, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          show: false,
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 15; //圆环大小
        },
        itemStyle: {
          show: false,
          color: obj => {
            const value = obj.value[2];
            return 'yellow';
          },
        },
        data: effectScatter,
      },
    ],
  };
}
